import React, { FC, ReactNode, useState, useEffect, Suspense } from 'react';
import { Row, Col, Menu } from 'antd';
import { menuConfig, menuConfigTop } from '@/config/menuConfig';
import _ from 'lodash';
import { menuConfigTopProps } from '@/config/interface';
import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
import logo from '@/assets/images/log2.jpg';
import classnames from 'classnames';

const { SubMenu } = Menu;

// eslint-disable-next-line object-curly-spacing
const Console: FC<RouteComponentProps> = ({
  location: { pathname },
  children,
}) => {
  const username = window.sessionStorage.getItem('username');
  const pathName = _.split(pathname, '/');
  const [openKeys, setOpenKeys] = useState<string[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const [selectedHeaderKeys, setSelectHeaderKeys] = useState<string[]>([]);

  useEffect(() => {
    const openKey = window.sessionStorage.getItem('openKey');
    openKey ? setOpenKeys([openKey]) : setOpenKeys(['sub1']);
    const arr = pathname.substr(1).split('/');
    setSelectedKeys([arr[1] + '/' + arr[2]]);
    setSelectHeaderKeys([pathName[2]]);
  }, [pathname]);

  const renderMenu: (data: any) => ReactNode = (data) => {
    return _.map(data, (item, key) => {
      if (item.children) {
        return (
          <SubMenu
            icon={<span className={classnames('iconfont', item.icon)}></span>}
            key={item.id}
            title={item.name}
          >
            {renderMenu(item.children)}
          </SubMenu>
        );
      }

      const path = _.isArray(item.path) ? item.path[0].path : item.path;
      const arr = path.split('/');

      return (
        <Menu.Item
          onClick={() => menuItemClick(item)}
          key={arr[0] + '/' + arr[1]}
        >
          <Link to={'/console/' + path} title={item.name}>
            <span className="point"></span>
            <span>{item.name}</span>
          </Link>
        </Menu.Item>
      );
    });
  };
  const menuItemClick: (item: any) => void = (item) => {
    if (item.severalLevels === '1') {
      window.sessionStorage.removeItem('openKey');
    } else {
      window.sessionStorage.setItem('openKey', openKeys[0]);
    }
  };
  const headerMenuItemClick: (item: menuConfigTopProps) => void = (item) => {
    if (item.openKeys) {
      setOpenKeys([item.openKeys]);
      window.sessionStorage.setItem('openKey', item.openKeys);
    } else {
      setOpenKeys([]);
      window.sessionStorage.removeItem('openKey');
    }
  };
  const renderMenuTop: (data: menuConfigTopProps[]) => ReactNode = (data) => {
    return _.map(data, (item, key) => {
      return (
        <Menu.Item
          key={item.id}
          className="menutop-item"
          onClick={() => headerMenuItemClick(item)}
          icon={<span className={classnames('iconfont', item.icon)}></span>}
        >
          <Link to={'/console/' + item.path}>{item.name}</Link>
        </Menu.Item>
      );
    });
  };
  const onOpenChange: (key: string[]) => void = (key) => {
    const latestkey = key.find((o) => openKeys.indexOf(o) === -1);

    setOpenKeys(latestkey ? [latestkey] : []);
  };
  const logCancle: () => void = () => {
    window.sessionStorage.clear();
    window.location.reload();
  };

  return (
    <Row className="layout-layout">
      <Col span="24" style={{ height: '100%' }}>
        {/* Header */}
        <Row className="header">
          <Col span="1" className="header-left">
            <img src={logo} className="header-logo" />
          </Col>
          <Col span="20">
            <Menu
              theme="dark"
              mode="horizontal"
              className="header-menu"
              selectedKeys={selectedHeaderKeys}
            >
              {renderMenuTop(menuConfigTop)}
            </Menu>
          </Col>
          <Col
            span="3"
            className="userBtn user-panel-trigger"
            style={{ textAlign: 'center' }}
          >
            <button onClick={logCancle} style={{ width: '100%' }}>
              {username} --- 退出
            </button>
          </Col>
        </Row>
        {/* content + slider */}
        <Row className="content-slider">
          <Col span="4" className="slider">
            <Menu
              mode="inline"
              openKeys={openKeys}
              selectedKeys={selectedKeys}
              onOpenChange={onOpenChange}
              style={{ height: '100%', borderRight: 0 }}
            >
              {renderMenu(menuConfig[pathName[2]])}
            </Menu>
          </Col>
          <Col span="20" className="content">
            <Suspense
              fallback={
                <div className="mask">
                  <div className="iconfont icon-LoadingIndicator goog-te-spinner"></div>
                </div>
              }
            >
              {children}
            </Suspense>
          </Col>
        </Row>
      </Col>
    </Row>
  );
};

export default withRouter(Console);
